<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>活跃用户统计</title>
	<base href="<%=basePath%>/" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /><!-- IE的渲染模式 -->
  	<meta name="renderer" content="webkit" /><!-- 浏览器高速模式 -->
  	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  	
	<meta name="keywords" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
	
	<link href="css/common.css?t=324329433443439" rel="stylesheet" />
	
    <link href="bootstrap/3.2/css/bootstrap.min.css" rel="stylesheet" />
	<link href="plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
	
	<script type="text/javascript" src="scripts/jquery/jquery-1.7.min.js" ></script>	
	<script src="bootstrap/3.2/js/bootstrap.min.js"></script>
	
	<script type="text/javascript" src="plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"  ></script>
	<script type="text/javascript" src="plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
	
	<script type="text/javascript" src="plugins/highcharts/highcharts.js" charset="utf-8"></script>
	<script type="text/javascript" src="plugins/highcharts/exporting.js" charset="utf-8"></script>
	
	<script src="index/js/index.js" type="text/javascript"></script>
	<script src="scripts/waittool.js" type="text/javascript"></script>

	<script type="text/javascript">
		var msg = "${msg}";
		if(msg!="")
			alert(msg);
			
	</script>
	
	<style>
		body{
			padding:15px;
			font-size:9px;
		}
	</style>

</head>
<body>
	<div id="main">
		<h2>
			<center>
				活跃用户统计
			</center>
		</h2>	
		
		<div>
			<center >
				<input type="text" id="startdate" class="  datetimepicker" size="16" type="text" value="${startdate }" readonly  />
				--	 
				<input type="text" id="enddate" class="  datetimepicker" size="16" type="text" value="${enddate }" readonly  />	 
				<button class="btn btn-success notprint" method="query"  >查询</button>
				<button class="hidden-xs btn btn-primary btn-print notprint" style="float:right;" >打印</button>
			</center>
		</div>
		
		<br/>
		
		<div>
			<div class="panel-group" id="accordion" status="st">
				<s:iterator value="list" id="app">
					 <div class="panel panel-default">
					    <div class="panel-heading">
					      <h4 class="panel-title">
					        <a data-toggle="collapse" data-parent="#accordion" href="#collapse_${appid }">
					            ${appname }
					        </a>
					      </h4>
					    </div>
					    <div id="collapse_${appid }" class="panel-collapse collapse in">
					      	<div class="panel-body" style="padding:5px;" >
					      		<div class="map" id="app_${appid }"></div>
					      	</div>
					    </div>
					 </div>
				</s:iterator>
			</div>
		</div>
		
		<div class="booter">
			<br />
		</div>
	</div>
	
	<script >
	
		//print
		$(".btn-print").click(function() {
			$(this).hide();
			$(".notprint").hide();
			window.print();
			$(".notprint").show();
			$(this).show();
		});
	
		function drawStatMap(target, monthtime, enddate, year, month, day, data){
			 
			  $(target).highcharts({
			        exporting:{
						enabled: false
					},
				 	chart: {
			            type: 'area',
			            zoomType: 'x'
			        },
			        title: {
			            text: '活跃用户统计'
			        },
			        subtitle: {
// 			            text: document.ontouchstart === undefined ? '拖动鼠标并选定进行放大' : '捏住图进行放大'
						text: monthtime + " 至 " + enddate
			        },
			        xAxis: {
			            type: 'datetime',
// 			            minRange: 1 * 24 * 3600000, // 1 days
			            dateTimeLabelFormats: { // don't display the dummy year
 			            	day: '%b %e',
			                month: '%b-%e ',
			                year: '%b'
			            },
			        },
			        yAxis: {
			            title: {
			                text: '数量（个）'
			            }
			        },
			        legend: {
			            enabled: false
			        },
			        plotOptions: {
			            area: {
			                fillColor: {
			                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
			                    stops: [
			                        [0, Highcharts.getOptions().colors[0]],
			                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
			                    ]
			                },
			                marker: {
			                    radius: 1
			                },
			                lineWidth: 1,
			                states: {
			                    hover: {
			                        lineWidth: 1
			                    }
			                },
			                threshold: null
			            }
			        },
			        series: [{
			            type: 'area',
			            name: '活跃数量',
			            pointInterval: 24 * 3600 * 1000,
			            pointStart: Date.UTC(year, month, day),
			            data: data
			        }]
			    });
		}
	
		function drawstat(dataArray, monthtime, enddate){
			if(dataArray.length<1){
				alert("暂无数据");
			}
			 var temp = monthtime.split("-");
			 var year = parseInt( temp[0] );
			 var month = parseInt( temp[1] ) -1;
			 var day = parseInt( temp[2] );
			
			for(var appindex in dataArray){
				var app = dataArray[appindex];
				var stats = app.jsonstat.stats;
				
				log(app.appname);
				
				if( stats==null || stats=="null")
					continue;
				
				var data = new Array();// [ [Date.UTC(1970,  9, 27), 90  ],  [Date.UTC(1970,  9, 29), 123  ]]
				var index2 = stats.length - 1;
				for(; index2>=0; index2--){
					var stat = new Array();
					var date = stats[index2].date;//date: "08-21"
					var tempDate = date.split("-");
					stat.push(Date.UTC(year, parseInt( tempDate[0] ) -1, tempDate[1]));
					stat.push(stats[index2].data);
					data.push(stat);
				}
				log(data);
				var html = "";
				html += app.appname;
				var target = $("#app_"+app.appid);
				drawStatMap(target, monthtime, enddate, year, month, day, data);
			}
		}
		
		function query(){
			
			var startdate = $("#startdate").val();
			var enddate = $("#enddate").val();

			startMask();//开启等待提示
			$.ajax({
				type:'post',
				data:{
					startdate: startdate,
					enddate: enddate
				},
				url: '${action}?method=query&querytype=json',
				dataType: "json",
				success: function(retdata){
					endMask();//关闭等待提示框
					log(retdata);
					if(retdata.error==-100){
						alert( retdata.msg );
					//	window.top.location = retdata.url;
					}else{
						if(retdata.error==0){
							drawstat(retdata.data, startdate, enddate);
						}else{
							alert( retdata.msg );
						}
					}
				},
				error : function(XMLHttpRequest, textStatus, errorThrown){
					alert( XMLHttpRequest.responseText);
					endMask();//关闭等待提示框
					$("#errorFiled").html( XMLHttpRequest.responseText );
					$("#errorFiled").show();
				}
			});
		}
	
		$(document).ready(function(){
		
			$("button[method]").click(function(e){
				var method = $(this).attr("method");
				window[method]();
			});
			
			$("input.datetimepicker").datetimepicker({
				format : "yyyy-mm-dd",
				language : "zh-CN",
				weekStart : 1,
				startView : 2, //日期时间选择器打开之后首先显示的视图。 Number, String. 默认值：2, 'month'
				todayBtn : true,
				autoclose : true,
				minView : 2 //日期时间选择器所能够提供的最精确的时间选择视图,Number, String. 默认值：0, 'hour'
			});
			
			//
			Highcharts.setOptions({
				lang : {
					contextButtonTitle : '导出',
					printChart : '打印',
					downloadJPEG : '导出为JPEG',
					downloadPDF : '导出为PDF',
					downloadPNG : '导出为PNG',
					downloadSVG : '导出为SVG',
					months: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					shortMonths: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
					weekdays: ['周日','周一','周二','周三','周四','周五','周六']
				}
			});
			
		});
	</script>
	
</body>
</html>
